<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>

  </style>
</head>
<body>
  <div>
    {{out}}
    <ul>
      <!--   v-for="(变量,下标)in数组"循环遍历指令,遍历的同时会生成
元素,当需要让页面的内容和数组进行绑定时使用   -->
      <li v-for="name in arr">{{name}}</li>
    </ul>
    <table  >
      <caption>商品表</caption>
      <tr>
        <th>序号</th>
        <th>商品标题</th>
        <th>价格</th>.
        <th>库存</th>
      </tr>
      <tr v-for="(p,i) in products">
          <td>{{i+1}}</td>
          <td>{{p.title}}</td>
          <td>{{p.price}}</td>
          <td>{{p.num}}</td>
      </tr>
    </table>
  </div>
  <script src="../day06/vue.min.js"></script>
  <script >
    let v=new Vue({
      el:"body>div",
      data:{
        out:"循环遍历",
        arr:["刘备","关羽","张飞","诸葛亮",],
        products:[{title:"小米手机",price:5000,num:500 },{title:"华为手机",price:8000,num:100 },{title:"苹果手机",price:200,num:100000 }]
      }
    })
  </script>
</body>
</html>